<template>
  <div>
    <div class="opinion">
      <div class="crumbs">
        <div>首页></div>
        <div>意见反馈</div>
      </div>
      <div class="bot">
        <div class="title">
          <div>尊敬的用户：</div>
          <div>
            您好！为了给您提供更好的服务，我们希望收集您使用时的看法或建议。对您的配合和支持表示衷心感谢！
          </div>
        </div>
        <div class="opin">
          <div class="one">
            <div>意见反馈</div>
            <textarea placeholder="请输入您要反馈的问题"></textarea>
          </div>
          <div class="two">
            <div>上传图片</div>
            <div>
              <img src="../assets/images/up_image.png" alt="" />
            </div>
          </div>
        </div>
        <div class="btn-rep">提交</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "opinion"
};
</script>

<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #DA213D;
input,
textarea {
  outline: none;
}
.opinion {
  width: 1200px;
  margin: 0 auto;
  .crumbs {
    display: flex;
    height: 131px;
    align-items: center;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    > div:nth-of-type(1) {
      color: #999999;
    }
    > div:nth-pf-type(2) {
      color: #333333;
    }
  }
  .bot {
    .title {
      color: rgba(51, 51, 51, 1);
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: 600;
      > div:nth-of-type(2) {
        padding-top: 10px;
      }
    }
    .opin {
      width: 100%;
      height: 356px;
      background-color: rgba(255, 251, 251, 1);
      margin-top: 16px;
      .one {
        display: flex;
        padding: 48px 0 0 45px;
        > div:nth-of-type(1) {
          color: #666666;
          font-size: 16px;
          padding-right: 29px;
        }
        textarea {
          width: 584px;
          height: 151px;
          border-radius: 2px;
          background-color: rgba(255, 255, 255, 1);
          box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.07);
          border: 1px solid rgba(219, 219, 219, 1);
          padding: 16px 0 0 16px;
          font-size: 16px;
        }
        ::placeholder {
          font-size: 16px;
          color: #999999;
        }
      }
      .two {
        display: flex;
        padding: 24px 0 0 45px;
        > div:nth-of-type(1) {
          color: #666666;
          font-size: 16px;
          padding-right: 29px;
        }
        > div:nth-of-type(2) {
          img {
            width: 88px;
            height: 88px;
          }
        }
      }
    }
    .btn-rep {
      background: $color;
      width: 228px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      color: #014a97;
      font-size: 18px;
      margin-top: 43px;
    }
  }
}
</style>
